<div{{ attributes.defaults({class: 'IconSearch'}) }}>

    <div class="IconSearchBox">
        <div class="p-4 markdown-container background-glass shadow-blur shadow-blur--rainbow mt-5"
             style="border-radius: .75rem">
            <fieldset class="d-flex d-flex gap-4">

                <div class="input-group" style="max-width: 200px;">
                    <label class="input-group-text" for="IconSearch-Set">
                        <twig:ux:icon name="icon-sets"/>
                    </label>
                    <select class="form-control" data-model="set" id="IconSearch-Set">
                        <option value="">All sets</option>
                        {% for group_name, options in this.getIconSetOptionGroups() %}
                            <optgroup label="{{ group_name }}">
                                {% for value, label in options %}
                                    <option value="{{ value }}">{{ label }}</option>
                                {% endfor %}
                            </optgroup>
                        {% endfor %}
                    </select>
                </div>

                <div class="input-group IconSearch__Query">
                    <label class="input-group-text" for="IconSearch-Query">
                        <twig:ux:icon name="icon-search"/>
                    </label>
                    <input
                        autofocus
                        type="search"
                        data-model="query"
                        placeholder="Results update as you type..."
                        class="form-control IconSearch__Input"
                        id="IconSearch-Query"
                    >
                    <p class="IconSearch__Iconify">
                        Powered by <a href="https://iconify.design/">iconify<span>.</span>design</a>
                    </p>
                </div>

                <div class="d-flex flex-shrink-0 IconSearch__Display">
                    <div class="btn-group" role="group" data-controller="icon-size">
                        <button class="btn" data-action="icon-size#small">
                            <twig:ux:icon name="grid-small"/>
                        </button>
                        <button class="btn" data-action="icon-size#large">
                            <twig:ux:icon name="grid-large"/>
                        </button>
                    </div>
                </div>

                {% if false %}
                    <div data-live-ignore="true">
                        <button class="btn IconBag__Button" data-controller="icon-bag">
                            <twig:ux:icon name="icon-folder"/>
                            <span class="IconBag__Badge" data-icon-bag-target="count"></span>
                        </button>
                    </div>
                {% endif %}

            </fieldset>
        </div>
    </div>

    <div id="IconSearchResults" class="mt-5">
        {% if this.icons|length > 0 %}
            <twig:Icon:IconGrid icons="{{ this.icons }}" id="IconGrid-{{ this.hash }}" iconSet="{{ this.iconSet ?? null }}" />
        {% elseif this.query %}
            <p class="pt-3 text-center">No icons found matching "{{ query }}".</p>
        {% endif %}
    </div>

</div>
